"use client"
import { useRelativeTime } from '@/utils/format/time'
import Image from '@/components/common/image'
import React from 'react'
import { getArticleDetailUrl } from '@/utils/build-url/news'
import Link from '@/components/common/link'
import { AiFillHeart } from "react-icons/ai";
import Icon from '@/components/common/icon'
import { formatWithThousandsSeparator } from '@/utils/format/number'
import { Card } from '@/components/layout/card-list'

export interface INewsArticleImgCardProps {
  id: number
  slug: string
  title: string
  image: string
  publishedTime: string
  likeCount: number
}
interface Props {
  obj: INewsArticleImgCardProps
}

const ArticleImgCard = ({obj: {id, slug, title, image, publishedTime, likeCount}}: Props) => {
  const relativeTime = useRelativeTime(publishedTime);
  return (
    <Card>
      <Link href={getArticleDetailUrl({ language: 'zh', article: slug })} className='relative block'>
        <Image className='aspect-[3/4]! object-cover' src={image} alt={title} />
        <div className='absolute bottom-0 left-0 right-0 gradient-to-b bg-gradient-to-t from-black/30 to-transparent py-card-p-y md:py-card-p-y-md px-card-p-x md:px-card-p-x-md space-y-content-gap-y md:space-y-content-gap-y-md'>
          <div className='space-y-txt-gap-y md:space-y-txt-gap-y-md'>
            <h3 className='text-white! line-clamp-1'>{title}</h3>
          </div>
          <ul className='tip text-white! text-txt-secondary flex justify-between'>
            <li className='flex items-center gap-txt-gap-x md:gap-txt-gap-x-md'><Icon icon={AiFillHeart} /> {formatWithThousandsSeparator(likeCount)}</li>
            <li>{relativeTime}</li>
          </ul>
        </div>
      </Link>
    </Card>
  )
}

export default ArticleImgCard